<template>
  <el-table :data="tableData" border :height="height">
    <template v-for="item in tableHeader">
      <table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" />
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center" />
    </template>
  </el-table>
</template>

<script>
import TableColumn from './TableColumn'
export default {
  components: {
    TableColumn
  },
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 表格的高度
    // eslint-disable-next-line vue/require-default-prop
    height: {
      type: String
    }
  }
}
</script>

<style scoped>

</style>
